<template>
  <div class="infinite-scroll">
    <fx-card title="基础用法">
      <ul v-infinite-scroll="baseLoad">
        <li v-for="i in baseCount" :key="i" class="list-item">{{ i }}</li>
      </ul>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="加载">
      <ul v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
        <li v-for="i in loadCount" :key="i" class="list-item">{{ i }}</li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
      <template #hide>
        <pre v-highlight="loaded"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'infiniteScroll',
  setup () {
    const baseCount = ref<number>(10)
    const loadCount = ref<number>(10)
    const loading = ref<boolean>(false)
    const noMore = computed(() => {
      return loadCount.value >= 20
    })
    const disabled = computed(() => {
      return noMore.value || loadCount.value
    })
    const baseLoad = () => {
      baseCount.value += 2
    }
    const load = () => {
      loading.value = true
      setTimeout(() => {
        loadCount.value += 2
        loading.value = false
      }, 1000)
    }

    const base = `<ul v-infinite-scroll="baseLoad">
  <li v-for="i in baseCount" :key="i" class="list-item">{{ i }}</li>
</ul>

export default defineComponent({
    setup() {
      const baseCount = ref<number>(10)
      const baseLoad = () => {
        baseCount.value += 2
      }
    }
})`

    const loaded = `<ul v-infinite-scroll="load" :infinite-scroll-disabled="disabled">
  <li v-for="i in loadCount" :key="i" class="list-item">{{ i }}</li>
</ul>
<p v-if="loading">加载中...</p>
<p v-if="noMore">没有更多了</p>

export default defineComponent({
    setup() {
      const loadCount = ref<number>(10)
      const loading = ref<boolean>(false)
      const noMore = computed(() => {
        return loadCount.value >= 20
      })
      const disabled = computed(() => {
        return noMore.value || loadCount.value
      })
      const load = () => {
        loading.value = true
        setTimeout(() => {
          loadCount.value += 2
          loading.value = false
        }, 1000)
      }
    }
})`

    return {
      baseCount,
      loadCount,
      loading,
      disabled,
      noMore,
      load,
      baseLoad,
      loaded,
      base
    }
  }
})
</script>

<style scoped lang="scss">
.infinite-scroll {
  ul {
    height: 200px;
    width: 100%;
    overflow: auto;

    > li {
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30px;
      background-color: rgba(45, 183, 245, 0.5);
      margin-bottom: 20px;
    }
  }

  p {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
